<template>
  <el-container style="height:100%">
    <el-aside  style="border-right: 2px solid black;width: 15%;background-color: rgb(84,92,101)">
        <div style="padding-left: 20px;padding-right: 20px;height: 30px;margin-top: 20px">
              <div>资源访问控制系统</div>
        </div>
        <el-menu
                router
                style="height: 100%;"
                :collapse="false"
        >
          <!-- 引入组件 -->
          <Aside :menuData="menuList"></Aside>
        </el-menu>
    </el-aside>
    <el-container>
      <el-header style="border-bottom: 3px solid black;background-color: #303133;padding:0px">
        <Header></Header>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
  import Aside from './Aside';
  import Header from './header';
  export default {
    components:{
      Aside,
      Header
    },
    data() {
      return {
        menuList:[],
        isCollapse:true
      };
    },
    mounted() {
      this.menuList=JSON.parse(localStorage.getItem("menuList"))
    },
  }
</script>
<style  scoped>
  ::v-deep .el-aside {
    overflow: hidden;
  }
    ::v-deep .el-main {
        background-color: #F0F0F0;
    }
</style>
